﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../js/jq/jquery.lastest.js"></script>
    <script src="../../js/ko/knockout.lastest.js"></script>
    <script type="text/javascript">
        var bill, helen;
        function MyViewModel(name, age) {
            this.personName = ko.observable(name);
            this.personAge = age;
            this.sayHi = function () {
                alert(this.personName());
            }
        }

        function setValue() {
            //console.log('::Before');
            bill.personName('Thiên Tuấn');
        }
        $(function () {
            bill = new MyViewModel('Bill', 8);
            helen = new MyViewModel('Helen', 6);

            ko.applyBindings(bill, $('#PanelA')[0]);
            ko.applyBindings(helen, $('#PanelB')[0]);
            ko.applyBindings(null , $('#PanelC')[0]);
        });
    </script>
</head>
<body>
    <div onclick="setValue();">Click here to Change</div>
    <div id="PanelA">
        The name is <span data-bind="text: personName"></span>
        <button data-bind="click: sayHi">Say hi</button>
    </div>

    <div id="PanelB">
        The name is <span data-bind="text: personName"></span>
        <button data-bind="click: sayHi">Say hi</button>
    </div>

    <ul id="PanelC" data-bind="foreach: ['cats', 'dogs', 'fish']">
        <li>The value is <span data-bind="text: $data"></span> - <span data-bind="text: $index"></span>
        </li>
    </ul>
</body>
</html>
